const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const Mock=require("mockjs");
const webpackbar=require("webpackbar");
const { VueLoaderPlugin } = require('vue-loader')

let data=Mock.mock({
    "banner|4":[{
        "img":"@image(100X100,@color)",
    }]
})

module.exports = {
    entry:"./src/index.js",
    output:{
        filename:"main.js",
        path:path.join(__dirname,"./dist")
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'}),
        new webpackbar(),
        new webpack.HotModuleReplacementPlugin({
            // Options...
          }),
        new VueLoaderPlugin()
    ],
    mode:"development",
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          {
            test: /\.css|scss|sass|less$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
            }, {
                loader: "sass-loader" // 将 Sass 编译成 CSS
            }]
          },
          {
            test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
            use: [
              {
                loader: 'file-loader',
                options: {}
              }
            ]
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
    },
    devServer:{
        host:"localhost",
        open:true,
        port:9000,
        hot:true,
        before(app)
        {
            app.get("/banner",(req,res)=>
            {
                res.send(data.banner)
            })
        }
    }
}